<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Three.js Object Loader</title>
    
    <style type="text/css">
      html { overflow: hidden; }
      body { margin: 0; padding: 0; overflow: hidden; font-family: Monospace; font-size: 13px; line-height: 20px; color: #333; }

      a { color: #0088cc; text-decoration: none; }
      a:hover, a:focus { color: #005580; text-decoration: underline; }

      /* stats */
      #fps, #ms { background: transparent !important; }
      #fpsText, #msText { color: #aaa !important; }
      #fpsGraph, #msGraph { display: none; }
    </style>

  </head>

  <body>

    <div id="container"></div>
    
    <script src="three/three.min.js"></script>
    <script src="three/OrbitControls.js"></script>
    <script src="three/Detector.js"></script>
    <script src="three/libs/stats.min.js"></script>
    <script src="three/libs/dat.gui.min.js"></script>
    <script src="three/libs/tween.min.js"></script>

    <script>

      if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

      var container;
      var stats;
      var camera, controls, scene, renderer;
      var mesh;
      var helper;

      var clock = new THREE.Clock();

      init();
      loop();

      function init() {

        container = document.getElementById( 'container' );

        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
        camera.position.set( 0, 200, 300 );

        scene = new THREE.Scene();



        // ambient light
        aLight = new THREE.AmbientLight( 0x444444 );
        scene.add( aLight );


        // directional - KEY LIGHT
        keyLight = new THREE.DirectionalLight( 0xdddddd, .7 );
        keyLight.position.set( -80, 60, 80 );
        scene.add( keyLight );
        
        // keyLightHelper = new THREE.DirectionalLightHelper( keyLight, 15 );
        // scene.add( keyLightHelper );


        // directional - FILL LIGHT
        fillLight = new THREE.DirectionalLight( 0xdddddd, .3 );
        fillLight.position.set( 80, 40, 40 );
        scene.add( fillLight );
        
        // fillLightHelper = new THREE.DirectionalLightHelper( fillLight, 15 );
        // scene.add( fillLightHelper );


        // directional - RIM LIGHT
        rimLight = new THREE.DirectionalLight( 0xdddddd, .6 );
        rimLight.position.set( -20, 80, -80 );
        scene.add( rimLight );
        
        // rimLightHelper = new THREE.DirectionalLightHelper( rimLight, 15 );
        // scene.add( rimLightHelper );


        // add objects here

        // var helper = new THREE.GridHelper( 120, 20 );
        // scene.add( helper );

        var material = new THREE.MeshPhongMaterial({
          color: 0xcccccc,
          side: THREE.DoubleSide
        });

        var objloader = new THREE.ObjectLoader();
        objloader.load( "models/teapot.json", function( group ) {

          mesh = group.children[0];
          mesh.material = material;
          mesh.scale.set(4,4,4);
          mesh.position.y = -30;
          scene.add( mesh );

        });

        renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
        renderer.setClearColor( 0x000000, 0 );
        renderer.setSize( window.innerWidth, window.innerHeight );

        container.appendChild( renderer.domElement );

        controls = new THREE.OrbitControls( camera, renderer.domElement );
        controls.enableKeys = false;

        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        container.appendChild( stats.domElement );

        //

        window.addEventListener( 'resize', resize, false );

      }


      function resize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
      }

      //

      var paused = false;

      function loop() {
        requestAnimationFrame( loop );
        if (!paused) {

          var delta = clock.getDelta();

          if (mesh) {
            mesh.rotation.y -= 0.5 * delta;
          }

          stats.update();
          controls.update();
          TWEEN.update();

          renderer.render( scene, camera );
        }
      }


      var step = 1;

      function applyStep(step) {
        // console.log(step);
        if      (step == 1) {
        }
        else if (step == 2) {
        }
        else if (step == 3) {
        }
      }

      onmessage = function(e) {
        // paused = (e.data == 'pause' || e.data == 'slide:stop');
        step = e.data.director.args[0];
        applyStep( step );
      };

      function forward() {
        step++;
        if (step > 3) { step = 3; return; }
        applyStep(step);
      }

      function back() {
        step--;
        if (step <= 0) { step = 1; return; }
        applyStep(step);
      }

      // Controls for stand-alone
      window.addEventListener('keydown', function (e) {
        if (e.keyCode == 38 || e.keyCode == 37) back();
        if (e.keyCode == 40 || e.keyCode == 39) forward();
      });

    </script>

  </body>
</html>
